<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>商品列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../static/css/font.css">
	<link rel="stylesheet" href="../static/css/weadmin.css">
	<link rel="stylesheet" href="../static/css/index.css">
	<script src="../lib/layui/layui.js" charset="utf-8"></script>

</head>

<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb" style="visibility: visible;">
			<a href="javascript:;">首页</a>
			<span lay-separator="">/</span>
			<a href="productList.html">商品管理</a>
			<span lay-separator="">/</span>
			<a href="productList.html">
				<cite>商品列表</cite>
			</a>
		</span>
		<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
			href="javascript:location.replace(location.href);" title="刷新">
			<i class="layui-icon" style="line-height:30px">ဂ</i>
		</a>
	</div>
	<div class="weadmin-body" id="app">
		<div class="weadmin-block">
			<button class="layui-btn" onclick="WeAdminShow('添加商品','./addProduct.html')">
				<i class="layui-icon"></i>添加</button>
			<span class="fr" style="line-height:40px">共有数据：{{page.total}} 条</span>
		</div>
		<table class="layui-table">
			<thead>
				<tr>
					<th>商品编号</th>
					<th>商品图片</th>
					<th>商品名称</th>
					<th>市场价格</th>
					<th>商品规格</th>
					<th>商品简介</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="goods in goodsList">
					<td>{{goods.id}}</td>
					<td><img :src="goods.defaultItem.image"></td>
					<td>{{goods.goodsName}}</td>
					<td>{{goods.price}}</td>
					<td width="20%">
						商品重量：{{goods.map.spzl[0]}}/
						主屏尺寸：{{goods.map.zpcc[0]}}/
						CPU型号：{{goods.map.cpu[0]}}/
						系统内核：{{goods.map.xtnh[0]}}/
						SIM卡类型：{{goods.map.sim[0]}}/
						电池容量：{{goods.map.dcrl[0]}}
					</td>
					<td width="20%">{{goods.title}}</td>
					<td class="td-manage">
						<a title="查看"
							:href="'itemProductList.html?goodsId='+goods.id+'&defaultItemId='+goods.defaultItem.id">
							<i class="layui-icon">&#xe705;</i>
						</a>
						<a title="修改" :href="'goodsDetails.html?goodsId='+goods.id" v-if="goods.status=='1'">
							<i class="layui-icon">&#xe642;</i>
						</a>
						<a title="未上架" @click="downPromptBox" v-else>
							<i class="layui-icon">&#xe64d;</i>
						</a>
						<a @click="updateGoodsStatus(goods.id,2)" title="下架">
							<i class="layui-icon">&#xe601;</i>
						</a>
						<a @click="updateGoodsStatus(goods.id,1)" title="上架">
							<i class="layui-icon">&#xe62f;</i>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 分页 -->
		<div class="block">
			<!-- element组件的分页属性(el-pagination)声明：
					background 给导航按钮添加背景颜色
					hide-on-single-page 只有一页时，是否隐藏分页
					current-page 设置当前页
					page-sizes 设置每页显示个数的下拉选项值
					page-size 设置每页的记录数
					pager-count 设置导航条显示的最大按钮数量,超过时会自动折叠
					total 总的记录数
					layout 设置组件的布局(即：需要显示的内容)[total/sizes/prev/pager/next]
					size-change 页码大小(即：每页记录数)变动事件
					current-change 当前页变动事件-->
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:hide-on-single-page="value" :current-page="page.pageNum" :page-sizes="pageSizes"
				:page-size="page.pageSize" :pager-count="pagerCount" :total="page.total"
				layout="sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>

	</div>
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/element/index.js"></script>
	<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
	<script src="../static/js/admin.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
	<script src="../static/js/controller/CommonUrl_yh.js"></script>
	<script src="../static/js/controller/product_yh.js"></script>
	<script src="../static/js/service/product_yh.js"></script>
	<script type="text/javascript">
		axios.defaults.baseURL = axios_url.baseURL;
		var vueapp = new Vue({
			el: '#app',
			data: {
				goodsList: null,			// 商品列表
				page: null,					// 分页信息
				value: true,				// 是否开启分页隐藏功能
				pageSizes: [5, 10, 20],		// 每页条数选项列表
				pagerCount: 5				// 导航按钮数
			},
			methods: {
				// 查询所有的商品信息
				findAll: product_yh_controller.findGoodsAll,
				// 修改商品(spu)的状态
				updateGoodsStatus: product_yh_controller.updateGoodsStatus,
				// 下架提示
				downPromptBox: product_yh_controller.downPromptBox,

				// 分页功能 改变下拉框中每页的记录数时触发
				handleSizeChange: product_yh_service.handleSizeChange,
				// 分页功能 点击导航按钮时触发
				handleCurrentChange: product_yh_service.handleCurrentChange,
			},
			created: product_yh_service.createdList,
		})
	</script>
</body>

</html>